<template>
  <div class="login-container" v-loading="loading" :element-loading-text="loadingText">
    <transition name="fade-slide" mode="out-in">
      <form @submit.prevent="handleLogin" class="login-form">
        <div class="form-group">
          <label for="login-phone">
            <i class="fas fa-mobile-alt"></i> 手机号
          </label>
          <div class="phone-input">
            <input id="login-phone" type="tel" v-model="loginForm.phone" placeholder="请输入手机号" required
              maxlength="11" @input="formatPhoneNumber">
          </div>
        </div>

        <div class="form-group">
          <label for="login-password">
            <i class="fas fa-lock"></i> 密码
          </label>
          <div class="password-input">
            <input id="login-password" :type="showPassword ? 'text' : 'password'" v-model="loginForm.password"
              placeholder="请输入密码" required>
            <button type="button" class="toggle-password" @click="showPassword = !showPassword">
              <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
            </button>
          </div>
        </div>

        <div class="form-options">
          <label class="remember-me">
            <input type="checkbox" v-model="loginForm.remember"> 记住我
          </label>
          <router-link to="/login/forgot-password" class="forgot-password">忘记密码?</router-link>
        </div>

        <button type="submit" class="submit-btn" :disabled="isLogging">
          <span v-if="!isLogging">
            <i class="fas fa-sign-in-alt"></i> 登录
          </span>
          <span v-else>
            <i class="fas fa-spinner fa-spin"></i> 登录中...
          </span>
        </button>

        <div class="social-login">
          <p class="divider"><span>或使用以下方式登录</span></p>
          <div class="social-buttons">
            <button type="button" class="social-btn wechat" @click="showFeatureNotAvailable('微信登录')">
              <i class="fab fa-weixin"></i>
            </button>
            <button type="button" class="social-btn qq" @click="showFeatureNotAvailable('QQ登录')">
              <i class="fab fa-qq"></i>
            </button>
            <button type="button" class="social-btn weibo" @click="showFeatureNotAvailable('微博登录')">
              <i class="fab fa-weibo"></i>
            </button>
          </div>
        </div>
      </form>
    </transition>
  </div>
</template>

<script>
import { phoneAuth as phoneAuthAPI } from "@/api/user";

export default {
  name: 'LoginView',
  data() {
    return {
      showPassword: false,
      isLogging: false,
      loginForm: {
        phone: '',
        password: ''
        // remember: false
      },
      loading: false,
      loadingText: '登录中'
    }
  },
  created() {
    // 页面加载时从本地存储获取记住的登录信息
    this.loadSavedCredentials();
  },
  methods: {
    formatPhoneNumber() {
      // 自动格式化手机号为数字
      this.loginForm.phone = this.loginForm.phone.replace(/\D/g, '')
    },
    loadSavedCredentials() {
      // 从localStorage获取存储的用户名和密码
      const savedCredentials = localStorage.getItem('rememberedCredentials');
      if (savedCredentials) {
        try {
          const { phone, password } = JSON.parse(savedCredentials);
          this.loginForm.phone = phone;
          this.loginForm.password = password;
          // this.loginForm.remember = true;
        } catch (e) {
          // console.error('Failed to load saved credentials', e);
        }
      }
    },
    saveCredentials() {
      // 如果勾选了记住我，则存储登录信息
      if (this.loginForm.remember) {
        const credentials = {
          phone: this.loginForm.phone,
          password: this.loginForm.password
        };
        localStorage.setItem('rememberedCredentials', JSON.stringify(credentials));
      } else {
        // 如果未勾选，则删除已存储的信息
        localStorage.removeItem('rememberedCredentials');
      }
    },
    async handleLogin() {
      if (!/^1[3-9]\d{9}$/.test(this.loginForm.phone)) {
        this.$message.error('请输入有效的手机号')
        return
      }

      
      try {
        this.isLogging = true
        this.loading = true;
        let res = await phoneAuthAPI(this.loginForm);
        if(res != ""){
          let { data } = res.data;
          
          localStorage.setItem("token", data);
          
          // 处理"记住我"功能
          this.saveCredentials();
          
          this.loadingText = '正在跳转主页，请稍后...';
          this.$router.push("/index");
        }else {
          this.isLogging = false
          this.loading = false;
        }

      } catch (error) {
        this.isLogging = false
        this.loading = false;
        this.$message.error(error);
      }
    },
    showFeatureNotAvailable(type) {
      this.$message({
        message: `${type}功能暂未开放，敬请期待`,
        type: 'info',
        duration: 2000,
        showClose: true,
        center: true
      });
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/styles/variables.less";

.login-container {
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
}

.form-group {
  margin-bottom: 20px;
  position: relative;

  label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: @gray-700;
    font-weight: 500;

    i {
      margin-right: 8px;
      color: @gray-500;
    }
  }

  input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid @gray-300;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    background-color: @gray-50;
    height: 46px;
    box-sizing: border-box;

    &:focus {
      outline: none;
      border-color: @primary;
      box-shadow: 0 0 0 3px rgba(@primary, 0.1);
      background-color: white;
    }

    &::placeholder {
      color: @gray-400;
    }
  }

  .phone-input, .password-input {
    position: relative;
    display: flex;
    height: 46px;
    width: 100%;
  }

  .phone-input {
    input {
      flex: 1;
      padding-right: 40px;
    }
  }

  .password-input {
    input {
      flex: 1;
      padding-right: 40px;
    }

    .toggle-password {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      height: calc(100% - 20px);
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      color: @gray-500;
      cursor: pointer;
      font-size: 16px;

      &:hover {
        color: @primary;
      }
    }
  }
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 13px;

  .remember-me {
    display: flex;
    align-items: center;
    color: @gray-600;

    input {
      margin-right: 8px;
    }
  }

  .forgot-password {
    color: @primary;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.submit-btn {
  width: 100%;
  padding: 14px;
  background: @primary;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 20px;

  &:hover {
    background: darken(@primary, 5%);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  &:disabled {
    background: @gray-400;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  i {
    margin-right: 8px;
  }
}

.social-login {
  text-align: center;

  .divider {
    position: relative;
    margin: 20px 0;
    color: @gray-500;
    font-size: 13px;

    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 30%;
      height: 1px;
      background: @gray-200;
    }

    &::before {
      left: 0;
    }

    &::after {
      right: 0;
    }
  }

  .social-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;

    .social-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      color: white;
      font-size: 18px;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      &.wechat {
        background: #07C160;
      }

      &.qq {
        background: #12B7F5;
      }

      &.weibo {
        background: #E6162D;
      }
    }
  }
}

.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.3s ease;
}

.fade-slide-enter,
.fade-slide-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

@media (max-width: 768px) {
  .form-group {
    .phone-input, .password-input {
      height: 42px;
      
      input {
        height: 42px;
        padding: 10px 12px;
      }
    }
  }
}
</style> 